<script setup lang="ts">
import { Button, message } from "ant-design-vue";
import { ref, watch } from "vue";
// 1、引入useClipboard函数
import { useClipboard } from "@vueuse/core";
const { copy, copied, isSupported } = useClipboard();
// 2、调用useClipboard函数，解构出方法
//copy是复制的函数  copied 是boolean值 是否已复制完成  isSupported 检查浏览器是否支
//3、封装onCopy函数，绑定到一键复制的按钮中
const onCopy = (orderNo: string) => {
  // 3.1检查浏览器是否 支持复制 不支持提示用户
  // if (isSupported.value) return message.error("未授权，不支持");
  // 3.2 浏览器支持 调用oncopy 复制 orderNo是需要复制的内容，按钮点击的传过来的形参
  copy(orderNo);
};
const detail = ref("我是vyun-admin中后台系统!");


watch(copied, () => {
  if (copied.value) message.success("复制成功");
});
</script>
<template>
  <div>
    引入 vueuse 进行一键复制，响应式 Clipboard API。剪贴板 API
    提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限
    Permissions API。获取权限之后, 才能访问剪贴板内容; 如果用户没有授予权限,
    则不允许读取或更改剪贴板内容
  </div>
  <div class="flex items-center">
    <div class="mr-5">{{ detail }}</div>
    <Button type="primary" @click="onCopy(detail)">一键复制</Button>
  </div>
</template>
<style scoped lang="less"></style>
